<template>
    <div class="article-container">
        <div class="article-title">{{articleContent.articleTitle}}</div>
        <div class="article-tag-wrapper">
            <img class="author-avatar" :src="articleContent.avatarUrl" alt="头像">
            <div class="article-tag">
                <ul class="flex">
                    <li>{{articleContent.username}}</li>
                    <li>{{articleContent.createTime}}</li>
                    <li class="iconfont">&#xe70c; {{articleContent.readCount}}</li>
                    <li class="iconfont icon-collect">{{articleContent.collectionCount}}</li>
                </ul>
                <ul class="flex">
                    <li>关键词：</li>
                    <li class="tag">{{articleContent.keyWords}}</li>
                </ul>
            </div>
        </div>
        <div class="article-content" style="width: 100%;">
            <article-content :articleContent="articleContent.articleContent"></article-content>
        </div>
        <ul class="content-footer">
            <li ref="likecount" @click="onLikeCount">
                <span class="iconfont">&#xe674;</span>
                {{articleContent.likeCount}}
            </li>
            <li class="svg-icon" ref="dislikeCount" @click="onDislikeCount">
                <span class="iconfont">&#xe601;</span>
                踩
            </li>
            <li class="svg-icon">
                <span class="iconfont">&#xe603;</span>
                评论
            </li>
            <li class="svg-icon">
                <span class="iconfont">&#xe602;</span>
                分享
            </li>
            <li class="svg-icon" ref="collect" @click="collect">
                <span class="iconfont">&#xe600;</span>
                收藏
            </li>
            <li class="click-item attention">关注</li>
            <li class="click-item all-good">一键三连</li>
        </ul>
    </div>
</template>

<script>
    import { addDislike, addLike } from "../../api/blog";
    import { ERROR_NO } from "../../util/config";
    import ArticleContent from "../../components/article-content/ArticleContent";

    const className = 'click'
    export default {
        props: {
            articleContent: {
                type: Object,
                default: () => {}
            }
        },
        methods: {
            // 喜欢
            onLikeCount () {
                const likeCount = this.$refs.likecount.classList
                const classList = Array.from(likeCount.values())
                const dislikeCount = this.$refs.dislikeCount.classList
                const dislikeClassList = Array.from(dislikeCount.values())
                if (dislikeClassList.includes(className)) {
                    dislikeCount.remove(className)
                }
                if (classList.includes(className)) {
                    likeCount.remove(className)
                    this.articleContent.likeCount--
                } else {
                    likeCount.add(className)
                    this.articleContent.likeCount++
                    this._addLike(this.articleContent.id)

                }
            },
            // 不喜欢
            onDislikeCount () {
                const likeCount = this.$refs.likecount.classList
                const likeClassList = Array.from(likeCount.values())
                const dislikeCount = this.$refs.dislikeCount.classList
                const dislikeClassList = Array.from(dislikeCount.values())
                if (likeClassList.includes(className)) {
                    likeCount.remove(className)
                    this.articleContent.likeCount--
                }
                if (dislikeClassList.includes(className)) {
                    dislikeCount.remove(className)
                } else {
                    dislikeCount.add(className)
                    this._addDislike(this.articleContent.id)
                }
            },
            collect () {
                const collect = this.$refs.collect.classList
                const collectClassList = Array.from(collect.values())
                if (collectClassList.includes(className)) {
                    collect.remove(className)
                } else {
                    collect.add(className)
                }
            },
            _addLike (id) {
                addLike(id).then(res => {
                    if (res.code !== ERROR_NO) {
                        this._messge({
                            message: res.message
                        })
                    }
                })
            },
            _addDislike(id) {
                addDislike(id).then(res => {
                    if (res.code !== ERROR_NO) {
                        this._messge({
                            message: res.message
                        })
                    }
                })
            }
        },
        components: {
            ArticleContent
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
   .article-container {
       margin-bottom: 10px;
       padding-top: 28px;
       box-sizing: border-box;
       border-radius: 20px;
       border: 1px solid $border-color;
       overflow: hidden;
       .article-title {
           height: 53px;
           margin-left: 24px;
           line-height: 53px;
           color: #000000;
           font-weight: 700;
           font-size: 30px;
       }
       .article-tag-wrapper {
           display: flex;
           align-items: center;
           height: 100px;
           margin: 12px 24px;
           padding: 0 21px;
           background-color: rgb(246, 246, 246);
           color: rgb(246, 246, 24);
           border-radius: 20px;
           .author-avatar {
               width: 61px;
               height: 61px;
               border-radius: 50%;
           }
           .article-tag {
               margin-left: 12px;
               .flex {
                   display: flex;
                   height: 27px;
                   line-height: 27px;
                   color: $font-gray;
                   font-size: 18px;
                   li + li {
                       margin-left: 23px;
                   }
                   & + .flex {
                       margin-top: 12px;
                   }
                   .tag {
                       margin-left: 12px;
                       padding: 0 4px;
                       box-sizing: border-box;
                       border: 1px solid $border-color;
                   }
               }
           }

       }
       .article-content {
           padding: 24px;
           box-sizing: border-box;
       }
       .content-footer {
           display: flex;
           align-items: center;
           width: 100%;
           height: 57px;
           padding-left: 24px;
           box-sizing: border-box;
           background: #f8f8f8;
           li {
               color: #555666;
               font-size: 14px;
               transition: all 100ms;
               cursor: pointer;
               & + li {
                   padding-left: 20px;
               }
               & > .iconfont {
                   margin-right: 4px;
               }
               &:hover {
                   color: $comment-font;
               }
           }
           .click {
               font-size: 18px;
               color: $comment-font;
           }
           .click-item {
               background: $comment-font;
               color: #fff;
               border: 1px solid $comment-font;
               font-size: 14px;
               height: 28px;
               line-height: 28px;
               padding: 0 16px;
               border-radius: 14px;
               box-sizing: border-box;
               &:hover {
                   color: #fff;
                   background: $comment-hover-font;
               }
           }
           .attention {
               margin: 0 18px;
           }
       }
   }
</style>
